<!--
*@Author: QWP
*@Description: 系统通知的展示
*@Date: 2024-09-03 10:00:08
-->
<template>
  <div class="u-sys-msg-box">
    <a-row class="u-notice-title">
      {{ data['nickname'] }}
    </a-row>
    <a-row>
      <span class="u-title-text">{{ getMsgTitleType }}</span>
    </a-row>
    <a-row>
      <span class="u-info-text">{{ data['messageInfo'] }}</span>
    </a-row>
    <a-row>
      <span class="u-info-text">{{ data['createtime'] }}</span>
    </a-row>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { urlFile } from '@/util/common'
import UploadEcho from '@/views/common/UploadEcho.vue'
const props = defineProps<{
  data: object
}>()

// 业务信息
const getMsgTitleType = computed(() => {
  let title = props.data['messageInfo']
  let busiType = ['备勤', '值班'].find(i => title.includes(i)) || ''
  return busiType + '信息'
})

</script>

<style lang='scss'>
.u-sys-msg-box {
  width: 350px;
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #ccc;
  .u-notice-title {
    padding: 6px 0;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid #ccc
  }
  .u-title-text {
    padding: 6px 0;
    font-size: 14px;
    font-weight: 500;
  }
  .u-info-text {
    padding: 6px 0;
    font-size: 14px;
    font-weight: unset;
  }
}
</style>